<template>
  <commonDialog :modelValue="modelValue" :title="title" @sure="saveResourceInfo" @close="cancel">
    <el-form ref="formRef" :model="resourceInfo" :rules="rules" :label-width="80">
      <el-form-item label="资源类型" prop="menuType">
        <el-radio-group v-model="resourceInfo.menuType">
          <el-radio :label="0">资源资源</el-radio>
          <el-radio :label="1">接口资源</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="资源标识" prop="name">
        <el-input v-model="resourceInfo.name" placeholder="请输入资源标识" clearable></el-input>
      </el-form-item>
      <el-form-item label="资源名称" prop="label">
        <el-input v-model="resourceInfo.label" placeholder="请输入资源名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="资源路径" prop="url">
        <el-input v-model="resourceInfo.url" placeholder="请输入资源路径" clearable></el-input>
      </el-form-item>
      <el-form-item label="资源排序" prop="sort">
        <el-input-number v-model="resourceInfo.sort" :min="0"/>
      </el-form-item>
      <el-form-item label="资源图标" v-if="resourceInfo.menuType===0" prop="ico">
        <icon-select v-model="resourceInfo.ico"></icon-select>
      </el-form-item>
      <el-form-item label="资源描述">
        <el-input type="textarea" v-model="resourceInfo.description" placeholder="请输入资源描述" clearable></el-input>
      </el-form-item>
    </el-form>
  </commonDialog>
</template>

<script>
import { onBeforeMount, reactive, ref, toRefs } from 'vue'
import { post } from '@/utils/httpRequest'
import { addResourceUrl, queryResourceByIdUrl, updateResourceByIdUrl } from '@/api/api'
import { propsConst } from '@/utils/propsConstant'
import IconSelect from '@/components/iconSelect/iconSelect'
import { resourceInfoRules } from '@/utils/verifyForm'
import { ElMessage } from 'element-plus'

export default {
  name: 'resourceInfo',
  components: { IconSelect },
  setup (props, { emit }) {
    const {
      type,
      resourceId,
      parentId
    } = toRefs(props)
    const rules = reactive(resourceInfoRules)
    const formRef = ref(null)
    const resourceInfo = ref({
      label: null,
      description: null,
      parentId: null,
      name: null,
      url: null,
      menuType: 0,
      ico: '',
      sort: 0
    })
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const saveResourceInfo = async () => {
      formRef.value.validate().then(async () => {
        let result
        const tempRequest = Object.assign(resourceInfo.value, {})
        if (tempRequest.menuType === 1) {
          tempRequest.ico = null
        }
        if (type.value === 1) {
          result = await post(updateResourceByIdUrl, tempRequest)
        } else {
          result = await post(addResourceUrl, tempRequest)
        }
        if (result.code === 200) {
          emit('save')
          cancel()
        }
      }).catch(() => {
        ElMessage.warning('请确认信息填写完整')
      })
    }
    onBeforeMount(async () => {
      if (type.value === 1) {
        const result = await post(queryResourceByIdUrl, { id: resourceId.value })
        if (result.code === 200) {
          resourceInfo.value = result.data
        }
      } else if (type.value === 3) {
        resourceInfo.value.parentId = parentId.value
      }
    })
    return {
      formRef,
      rules,
      resourceInfo,
      cancel,
      saveResourceInfo
    }
  },
  props: Object.assign(propsConst, {
    resourceId: {
      type: Number,
      required: false,
      default: 0
    },
    parentId: {
      type: Number,
      required: false,
      default: 0
    }
  })
}
</script>

<style scoped>

</style>
